import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Layout } from 'antd';
import { Outlet, Link } from 'react-router-dom'
import React, { useState } from 'react';
const { Header, Sider, Content } = Layout;
const Menus = () => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <div className='Menu'>
          <ul>消息发布概况
            <div><li><Link to='/message/MessageSurvey'>消息发布概况</Link></li></div>
            <div><li><Link to='/message/MessageList'>消息发布列表</Link></li></div>
            <div><li><Link to='/message/SchoolMessage'>学校月消息发布排行</Link></li></div>
            <div><li><Link to='/message/TeacherMessage'>老师月消息发布排行</Link></li></div>
          </ul>
        </div>
      </Sider>
      <Layout className="site-layout">
        <Header className="Header-background">
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => {
              setCollapsed(!collapsed);
            }
          })}
        </Header>
        <Content className="Content-background">
          <div className='cont'>

            <Outlet />
            
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Menus
